<template>
	<div>
		<el-card class="box-card">
			<div class="w-100 hr-flex-start" style="flex-wrap: wrap; padding: 15px 0">
				<template v-if="showSearch">
					<div v-for="(item, index) in searchArr_copy" :key="index" style="min-width: 250px; margin: 8px 0">
						<template v-if="item.slot">
							<div class="w-h-100 hr-flex-start">
								<span style="font-size: 14px">{{ $t('aY6Osbo7zDeac5gzapB3', [item.label]) }}</span>
								<div class="flex-1 pos-r w-h-100" style="height: 30px">
									<div style="" class="pos-a w-100 hr-flex-start">
										<slot :name="item.slot" :data="item"></slot>
									</div>
								</div>
							</div>
						</template>
						<template v-else>
							<div class="w-h-100 hr-flex-start">
								<span style="font-size: 14px">{{ $t('smonOxDhoGBnytO9Ougey', [item.label]) }}</span>
								<div class="flex-1 pos-r w-h-100" style="height: 30px">
									<div style="" class="pos-a w-100 hr-flex-start">
										<template v-if="item.type == 'input'">
											<el-input clearable v-model="item.value" :placeholder="item.label" style="padding: 0 20px" />
										</template>
										<template v-else-if="item.type == 'select'">
											<el-select v-model="item.value" :placeholder="item.label" style="padding: 0 20px">
												<el-option :label="op.label" :value="op.value" v-for="(op, op_index) in item.option" :key="op_index" />
											</el-select>
										</template>
										<template v-else-if="item.type == 'date'">
											<el-date-picker v-model="item.value" type="date" :placeholder="item.label" style="padding: 0 20px" value-format="YYYY-MM-DD" />
										</template>
									</div>
								</div>
							</div>
						</template>
					</div>
				</template>
				<div style="margin: 8px 0">
					<template v-if="showSearch">
						<el-button icon="ele-Refresh" @click="refresh">{{ $t('nPhtThUn4LrVtwBcSaYw') }}</el-button>
						<el-button type="primary" icon="ele-Search" @click="submit">{{ $t('qEh3zD5bC8bZb4bLvFe29') }}</el-button>
					</template>
					<slot></slot>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script lang="ts">
import { defineComponent, ref, PropType, watch } from 'vue';
export default defineComponent({
	props: {
		searchArr: {
			type: Array as PropType<any[]>,
			default: () => [],
		},
		showSearch: {
			type: Boolean,
			default: true,
		},
	},
	setup(this, props, ctx) {
		let searchParams = ref<any>({});
		let searchArr_copy = ref<any[]>([]);
		searchArr_copy.value = JSON.parse(JSON.stringify(props.searchArr));
		watch(
			searchArr_copy,
			(newVal, odlVal) => {
				let obj: any = {};
				newVal.forEach((item: any) => {
					obj[item.key] = item.value;
				});
				searchParams.value = obj;
			},
			{
				deep: true,
			}
		);
		// 查询
		const submit = () => {
			ctx.emit('submit', JSON.parse(JSON.stringify(searchParams.value)));
		};
		// 重置
		const refresh = () => {
			searchArr_copy.value.forEach((item: any) => {
				if (item.hasOwnProperty('default')) {
					item.value = item.default;
				} else {
					item.value = '';
				}
			});
			setTimeout(() => {
				ctx.emit('submit', JSON.parse(JSON.stringify(searchParams.value)));
			});
		};
		return {
			searchArr_copy,
			submit,
			refresh,
		};
	},
});
</script>
<style lang="scss" scoped>
:deep(.el-card__body) {
	padding: 0 20px;
}
</style>
